<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title><%= title %></title>
    <link rel="stylesheet" href="/stylesheets/aijiduo/preorder.css">
    <script src="/javascripts/aijiduo/preorder.js"></script>
    <% include ../common/common-resource.ejs %>
</head>
<body>
<% include ../aijiduo/header.ejs %>
<div class="container-fluid preorder-container">
    <div class="row banner-content">
        <div class="coordinate-path col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
            <a href="#">
                <%= __('aijiduo.preorder.banner-content.coordinate-path.a-1')%>
            </a>
            <span>></span>
            <a href="#">
                <%= __('aijiduo.preorder.banner-content.coordinate-path.a-2')%>
            </a>
        </div>
        <div class="right-side col-lg-4 col-lg-offset-7 col-md-12 col-sm-12 col-xs-12">
            <div class="title">
                <%= __('aijiduo.preorder.banner-content.title')%>
            </div>
            <div class="brief">
                <%= __('aijiduo.preorder.banner-content.brief')%>
            </div>
            <div class="line"></div>
        </div>
    </div>
    <div class="row bottom-content">
        <div class="tab-container col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
            <ul class="tab-body">
                <li class="tab-item active" id="1" onclick="onClick(this)">
                    <%= __('aijiduo.preorder.bottom-content.tab-item-1')%>
                </li>
                <li class="tab-item" id="2" onclick="onClick(this)">
                    <%= __('aijiduo.preorder.bottom-content.tab-item-2')%>
                </li>
                <li class="tab-item" id="3" onclick="onClick(this)">
                    <%= __('aijiduo.preorder.bottom-content.tab-item-3')%>
                </li>
                <li class="tab-item" id="4" onclick="onClick(this)">
                    <%= __('aijiduo.preorder.bottom-content.tab-item-4')%>
                </li>
            </ul>
            <div class="image-box" id="img-1">
                <img src="/images/aijiduo/preorder/fruit-picking.png" alt="" />
            </div>
            <div class="image-box" id="img-2" style="display:none;">
                <img src="/images/aijiduo/preorder/glass-room.png" alt="" />
            </div>
            <div class="image-box" id="img-3" style="display:none;">
                <img src="/images/aijiduo/preorder/cuisine.png" alt="" />
            </div>
            <div class="image-box" id="img-4" style="display:none;">
                <img src="/images/aijiduo/preorder/yacht.png" alt="" />
            </div>
        </div>
        <div class="address-preorder-container col-lg-10 col-lg-offset-1 col-md-12 col-sm-12 col-xs-12">
            <div class="row">
                <div class="left-side col-lg-5 col-lg-offset-1 col-md-5 col-md-offset-1 col-sm-12 col-xs-12">
                    <div class="title">
                        <%= __('aijiduo.preorder.address-preorder-container.left-side.title')%>
                    </div>
                    <div class="top-location-map">
                        <div class="location">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <%= __('aijiduo.preorder.address-preorder-container.top-location-map.lacation')%>
                        </div>
                        <div class="map-img">
                            <img src="/images/aijiduo/preorder/map-01.png" alt="" />
                        </div>
                    </div>
                    <div class="bottom-location-map">
                        <div class="location">
                            <i class="fa fa-map-marker" aria-hidden="true"></i>
                            <%= __('aijiduo.preorder.address-preorder-container.bottom-location-map.lacation')%>
                        </div>
                        <div class="map-img">
                            <img src="/images/aijiduo/preorder/map-02.png" alt="" />
                        </div>
                    </div>

                </div>
                <div class="right-side col-lg-5  col-md-5  col-sm-12 col-xs-12">
                    <div class="title">
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.title')%>
                    </div>
                    <div class="name">
                    <span>
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.name')%>
                    </span>
                        <input type="text" name="" id="">
                    </div>
                    <div class="phone">
                    <span>
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.phone')%>
                    </span>
                        <input type="text" name="" id="">
                    </div>
                    <div class="picking-date">
                    <span>
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.picking-date')%>
                    </span>
                        <input type="text" name="" id="">
                    </div>
                    <div class="tour-number">
                    <span>
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.tour-number')%>
                    </span>
                        <input type="text" name="" id="">
                    </div>
                    <div class="book-catering-flag">
                    <span>
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.book-catering')%>
                    </span>
                        <input type="radio" name="" id="">
                    </div>
                    <div class="remarks">
                    <span>
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.remarks')%>
                    </span>
                        <textarea name="" id="" cols="47" rows="2"></textarea>
                    </div>
                    <div class="submit-btn">
                        <%= __('aijiduo.preorder.address-preorder-container.right-side.submit')%>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>

<% include ../aijiduo/footer.ejs %>
</body>
</html>
